<template>
	<view class="fullContent bgf8">
		<view class="patientInfo bgw pd30">
			<!-- <img src="../../static/bg/goQrcode.png" mode=""></img> -->
			<view class="info">
				<view class="name">{{message.wzd.user.name}}</view>
				<view class="sex"><text>年龄：{{message.wzd.user.nianling}}</text><text
						style="margin-left: 48upx;">性别：<text v-if="message.wzd.user.sex == 1">男</text><text
							v-else>女</text></text></view>
			</view>
		</view>
		<view class="time bgw pd30">
			<img src="../../static/bg/appointment.png" mode=""></img>
			<view>挂号时间：<text>{{message.guahao.time}}</text></view>
		</view>
		<view class="medicalRecord bgw pd30">
			<view class="title">
				基本信息
			</view>
			<YSteps color='#fff' backgroundColor='#6996FE' :infoList='list'></YSteps>
			<view class="color" @click="looks()">查看完整问诊单</view>
		</view>
		
		<view v-if="chufang.typestr">
			<view class="title">开方信息：</view>
			<uni-list>
				<uni-list-item v-for="(i,k) in chufang.list" :key="k" class="hasMsg hasStu" :title="'药材'+'：'" :rightText="i.name+' '+i.num2+'g'+' '+i.yongfa"></uni-list-item>
			</uni-list>
			<view class="title">处方信息：</view>
			<uni-list>
				<uni-list-item class="hasMsg" title="方剂类型：" :rightText="chufang.typestr"></uni-list-item>
				<uni-list-item class="hasMsg" title="取药方式：" rightText="快递"></uni-list-item>
				<uni-list-item class="hasMsg" title="用法：" v-if="chufang.yongfa == 0" rightText="内服"></uni-list-item>
				<uni-list-item class="hasMsg" title="用法：" v-else rightText="外用"></uni-list-item>
				<uni-list-item class="hasMsg" title="剂数：" :rightText="chufang.jishu+'剂'"></uni-list-item>
				<uni-list-item class="hasMsg" title="每日：" :rightText="chufang.meiri+'剂'"></uni-list-item>
				<uni-list-item class="hasMsg" title="一剂分几次：" :rightText="chufang.jifen+'次'"></uni-list-item>
				<uni-list-item class="hasMsg" title="每次多少：" :rightText="chufang.meici+'ml'"></uni-list-item>
				<!-- <uni-list-item class="hasMsg" title="取发药：" rightText="加急"></uni-list-item> -->
				<uni-list-item class="hasMsg" title="医嘱：" :rightText="chufang.yizhu"></uni-list-item>
			</uni-list>
		</view>
		<view style="height: 50rpx;"></view>
	</view>
</template>

<script>
	import {
		guahaoDetail
	} from '../../request/api.js'
	import YSteps from '../../components/Y-Steps/Y-Steps.vue'
	export default {
		components: {
			YSteps
		},
		data() {
			return {
				baseUrl: "",
				message: {
					guahao: {},
					wzd: {
						user: {
							name: ''
						}
					},
					user: {}
				},
				list: [{
						title: '既往病史',
						info: ''
					},
					{
						title: '过敏史',
						info: ''
					},
					{
						title: '病情描述',
						info: ''
					},
					{
						title: '相关图片',
						inf0: '',
						imgList: []
					},
					{
						title: '问诊单详情',
						info: ''
					}
				],
				chufang:{
					typestr:'',
					list:[]
				}
			}
		},
		onLoad(options) {
			this.baseUrl = getApp().globalData.baseUrlImg;
			guahaoDetail({
				id: options.id
			}).then(res => {
				if (res.code == 200) {
					this.message = res.data

					// 基本信息
					let imgs = []
					if (res.data.wzd.images) {
						res.data.wzd.images.forEach(item => {
							let img = this.baseUrl + item
							imgs.push((img))
						})
						this.list[3].imgList = imgs
					}
					this.list[0].info = res.data.wzd.jwbs
					this.list[1].info = res.data.wzd.gms
					this.list[2].info = res.data.wzd.miaoshu
					this.list[4].info = res.data.wzd.str
					
					// 开方信息
					if(res.data.chufang){
						this.chufang = res.data.chufang
					}
				}
			})
		},
		methods: {
			looks() {
				uni.navigateTo({
					url: './detail?items=' + JSON.stringify(this.message.wzd.text.items)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.patientInfo {
		height: 208upx;
		display: flex;
		align-items: center;
		margin-bottom: 24upx;

		img {
			width: 112upx;
			height: 112upx;
			border-radius: 50%;
		}

		.info {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-left: 32upx;

			.name {
				font-size: 40upx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #000000;
				margin-bottom: 16upx;
			}

			.sex {
				font-size: 28upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #414141;
				margin-left: upx;
			}
		}
	}

	.time {
		height: 96upx;
		display: flex;
		align-items: center;
		margin-bottom: 24upx;

		img {
			width: 48upx;
			height: 48upx;
		}

		>view {
			font-size: 28upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #414141;
			margin-left: 16upx;

			text {
				color: #F86C53;
				margin-left: 16upx;
			}
		}
	}

	.medicalRecord {
		padding: 30upx;

		.title {
			font-size: 32upx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #000000;
			margin-bottom: 32upx;
		}

		.color {
			color: #F86C53;
			padding-left: 30upx;
			margin-top: -60upx;
		}
	}
	.title{
		font-size: 32upx;
		font-weight: bold;
		margin: 30upx;
	}
</style>